<template>
	<view :class="pageClass" :style="pageStyle" v-if="pageReady">
			<moxi-nav :set="navSet"></moxi-nav> 
			<view v-for="(mod,mk) in modData" :class="mod.mod_class"  :style="mod.css">
			<view style="display: flex;flex-direction: column;margin:5px;" v-if="data.id&&mod.name=='content_page'">
				<text class="u-line-2" style="margin: 5px 0;">{{data.title}}</text>
				<view style="display: flex;flex-direction: row;justify-content: space-between;margin-top: 10px;">
					<text style="font-size: 12px;color: #666">发布：{{data.time}}</text>
					<view style="display: flex;flex-direction: row;margin-right: 3px;">
						<u-icon name="eye-fill" color="#999" size="12"></u-icon>
						<view style="font-size: 12px;color: #999;margin-left: 5px;">{{data.view}}</view>
					</view>
				</view>
				<view style="font-size: 12px;color: #999;padding: 10px;margin-top: 10px;
				border-radius: 4px;background-color: #eee;" v-if="data.desc.length">
					{{data.desc}}
				</view>
				 <video v-if="data.vedio&&data.vedio.length" :src="data.vedio" :poster="data.vedio_img&&data.vedio_img.length?data.vedio_img:''"
				                   controls style="width: 100%;margin-top: 10px;"></video>
				<template v-if="data.content.length">
					<u-divider text="内容详情"></u-divider>
					<view class="content">
						<u-parse :content="data.content"></u-parse>
					</view>
				</template>
			</view>
			<!-- 下面是下载扩展 -->
		
			<view  v-else-if="data.id&&mod.name=='plugin_down_btn'&&data.plugin_down&&data.plugin_down.path" :class="mod.mod_class"  :style="mod.css">
				<view class="down-box" :style="'border-color: '+app_color">
					<template v-if="data.plugin_down.checkPower==0">
							<u-parse :content="data.plugin_down.msg"></u-parse>
					</template>
					<template v-else>
						<view v-if="data.plugin_down.checkLogin==0">
							<u-button text="请登录后下载!" size="small" :color="app_color" @click="login()"></u-button>
						</view>
						<view v-else>
							<!-- #ifdef H5 -->
							<a :href="data.plugin_down.path" :download="'附件.'+data.plugin_down.type" style="text-decoration: none;">
							<u-button text="下载附件" size="small" :color="app_color"></u-button>
							</a>
							<!-- #endif -->
							<!-- #ifndef H5 -->
							<u-button text="下载附件" :color="app_color" @click="save(data.plugin_down.file)"></u-button>
							<!-- #endif -->
						</view>
						<view style="margin: 0 10px;margin-top: 4px;font-size: 14px;">
							格式：
							<text :style="'font-weight: 600;color:' +app_color">{{data.plugin_down.type}}</text>
						</view>
						<view style="margin-top: 4px;font-size: 14px;">
							大小：
							<text :style="'font-weight: 600;color:' +app_color">{{data.plugin_down.size_f}}</text>
						</view>
					</template>
				</view>
			</view>
			<!-- 下面是评论扩展 -->
			<view v-else-if="data.id&&mod.name=='plugin_comment'" :mod="mod" :class="mod.mod_class"  :style="mod.css">
				<plugin-comment :set="mod.set" :content="data" type="article"></plugin-comment>
			</view>

			 <moxi-index v-else :list="mod"></moxi-index>
			</view>
			
	</view>
</template>

<script>
	export default {
		data() {
			return {
				data:{}
			}
		},onLoad() {
			if(this.param.id){
				this.get()
			}else{
				this.msg('页面错误')
			}
		},
		methods: {
			login(){
				this.toLogin()
			},
			get(){
				let self = this;
				this.moxiPost('/index/app/get_content',{id:this.param.id},function(data){
					if(data.data.content&&data.data.content.id){
						data.data.content.time = uni.$u.timeFormat(data.data.content.time, 'yyyy-mm-dd');
						self.data = data.data.content;
						self.data.content = self.data.content.replace(/\<img /g,'<img style="max-width:100%;display:block;" ');
						self.$set(self.navSet,'title',data.data.content.title)
						uni.setNavigationBarTitle({
							title:data.data.content.title
						})
					}else{
						self.msg('内容不存在')
					}
				})
				
			},
			save(file){
				let self = this;
				uni.downloadFile({
					url: file, //仅为示例，并非真实的资源
					success: (res) => {
						if (res.statusCode === 200) {
							self.saveFile(res.tempFilePath)
						}else{
							this.msg('下载失败')
						}
					}
				});
			},
			saveFile(tempFilePath){//保存到本地
			let self = this;
				// #ifdef MP-BAIDU
				//文件保存到本地
				uni.saveFile({
					tempFilePath:tempFilePath,//临时路径
					success:res=>{
						uni.showToast({
							icon:'none',	
							mask:true,
							title:'文件已保存'+res.savedFilePath,//保存路径
							duration:3000
						})
						
						//打开文档查看
						uni.openDocument({
							filePath:res.savedFilePath,
							success:res=>{
								console.log('打开文档成功');
							}
						})
						
					}
				})
				// #endif
				
				// #ifdef MP-WEIXIN
				    const FileSystemManager = wx.getFileSystemManager()
					FileSystemManager.saveFile({
						tempFilePath:tempFilePath,
						success(res){
							self.msg("保存成功，即将打开文件！")
					//打开文档查看
					uni.openDocument({
						filePath:res.savedFilePath,
						success:res=>{
							console.log('打开文档成功');
						}
					})
						}
					})
				// #endif
			}
		}
	}
</script>

<style>
	.content p{margin: 0;padding: 0;}

.down-box{
	display: flex;flex-direction: row;justify-content: center;border: 1px #666 dashed;padding: 15px;border-radius: 5px;
}

</style>
